<template>
  <div>
    <a-page-header :title="title">
      <template #extra>
        <a-button @click="initData" type="primary">刷新</a-button>
        <a-button @click="update" type="primary">提交</a-button>
      </template>
    </a-page-header>
    <div>
      <a-form v-if="data" :model="data" :label-col="{ span: 24 }" :wrapper-col="{ span: 24 }">
        <div class="list-w">
          <a-form-item label="是否校验短信验证码">
            <a-switch v-model:checked="data.CheckSMSCode" />
          </a-form-item>
          <a-form-item label="是否校验密码强度">
            <a-switch v-model:checked="data.CheckPasswordStrength" />
          </a-form-item>
          <a-form-item label="token持续时长,单位秒">
            <a-input v-model:value="data.TokenDuration" />
          </a-form-item>
          <a-form-item label="是否启动单一设备登录">
            <a-switch v-model:checked="data.SingleDeviceLogin" />
          </a-form-item>
          <a-form-item
            label="是否开启通过query传递token的功能 header中未检测到token 将使用query中的token"
          >
            <a-switch v-model:checked="data.TokenQuery" />
          </a-form-item>
          <a-form-item label="注册后是否自动登录">
            <a-switch v-model:checked="data.RegisterAutoLogin" />
          </a-form-item>
          <a-form-item label="密码登录时是否校验验证码 默认true 一直校验">
            <a-switch v-model:checked="data.CheckImgCode" />
          </a-form-item>
        </div>
        <div class="list-w">
          <a-form-item label="系统请求已注册服务的swagger的超时时间,单位毫秒">
            <a-input v-model:value="data.ServiceSwaggertimeout" />
          </a-form-item>
          <a-form-item label="系统请求已注册服务的接口超时时间,单位毫秒">
            <a-input v-model:value="data.ServiceWaitingTimeout" />
          </a-form-item>
          <a-form-item label="掉线时间 单位分钟,在注册的服务掉线多长时间后开始进行提醒或关闭">
            <a-input v-model:value="data.DownTime" />
          </a-form-item>
          <a-form-item label="是否开启服务监控通知,开启后会在掉线一定时长后进行钉钉通知提醒">
            <a-switch v-model:checked="data.DownMonitor" />
          </a-form-item>
          <a-form-item label="钉钉通知地址">
            <a-input v-model:value="data.dingWebhook" />
          </a-form-item>
          <a-form-item label="达到DownTime时间后 停止异常服务的启用状态,不推荐生产模式下开启">
            <a-switch v-model:checked="data.DownStopEnabledServer" />
          </a-form-item>
        </div>
        <div class="list-w">
          <a-form-item label="登录时开启扫码验证,通过微信扫码打开小程序进行登录验证">
            <a-switch v-model:checked="data.OpenLoginScanVerifyForWeChat" />
          </a-form-item>
          <a-form-item
            label="扫码打开的小程序版本,正式版为 release，体验版为 trial，开发版为 develop"
          >
            <a-radio-group v-model:value="data.ScanEnvVersion">
              <a-radio value="develop">开发版</a-radio>
              <a-radio value="trial">体验版</a-radio>
              <a-radio value="release">正式版</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label="登陆时可以自己绑定手机号码,设置为false只能由上级进行修改绑定">
            <a-switch v-model:checked="data.LoginBindPhoneOfSelf" />
          </a-form-item>
          <a-form-item label="长期未登录,提醒的角色,需要在角色列表中存在才行,设置为空则关闭">
            <a-input v-model:value="data.ReminderRole" />
          </a-form-item>
          <a-form-item label="长期未登录,首次开始提醒的间隔天数,单位:天">
            <a-input v-model:value="data.FirstReminderDay" />
          </a-form-item>
          <a-form-item label="长期未登录,重复提醒间隔天数,单位:天">
            <a-input v-model:value="data.RepeatReminderDay" />
          </a-form-item>
        </div>
        <div class="list-w">
          <a-form-item label="开启账号登陆时密码错误封禁功能">
            <a-switch v-model:checked="data.AccountErrBanOpen" />
          </a-form-item>
          <a-form-item label="密码错误时 从首次开始到最大次数的时间范围 单位:分钟">
            <a-input v-model:value="data.AccountErrTimeScope" />
          </a-form-item>
          <a-form-item label="密码错误在指定时间范围下允许的最大错误次数">
            <a-input v-model:value="data.AccountErrMaxNumber" />
          </a-form-item>
          <a-form-item label="首次封禁时间 单位:分钟">
            <a-input v-model:value="data.FirstBanTime" />
          </a-form-item>
          <a-form-item label="二次封禁时间 单位:分钟">
            <a-input v-model:value="data.SecondBanTime" />
          </a-form-item>
          <a-form-item label="低频率时间下连续错误最大次数">
            <a-input v-model:value="data.AccountErrCount" />
          </a-form-item>
          <a-form-item label="修改密码的时间间隔,达到或超过间隔时间则进行提示,单位:天">
            <a-input v-model:value="data.UpdatePassInterval" />
          </a-form-item>
        </div>
        <div class="list-w">
          <a-form-item label="图片宽 点选验证码配置">
            <a-input v-model:value="tapCaptchaConfig.width" />
          </a-form-item>
          <a-form-item label="图片高 点选验证码配置">
            <a-input v-model:value="tapCaptchaConfig.height" />
          </a-form-item>
          <a-form-item label="文字数量 点选验证码配置">
            <a-input v-model:value="tapCaptchaConfig.fontNum" />
          </a-form-item>
          <a-form-item label="校验数量 点选验证码配置">
            <a-input v-model:value="tapCaptchaConfig.checkNum" />
          </a-form-item>
          <a-form-item label="源文字集合 点选验证码配置">
            <a-input v-model:value="tapCaptchaConfig.fontStr" />
          </a-form-item>
          <a-form-item label="背景图地址 点选验证码配置">
            <a-upload
              v-model:file-list="fileList"
              name="file"
              :action="action"
              :headers="headers"
              @change="handleChange"
              :maxCount="1"
            >
              <a-button style="width: 100%">
                <upload-outlined></upload-outlined>
                点击上传
              </a-button>
            </a-upload>
          </a-form-item>
          <a-form-item label="偏移量 点选验证码配置">
            <a-input v-model:value="tapCaptchaConfig.accuracy" />
          </a-form-item>
        </div>
      </a-form>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { PostConfigInfo, getConfigInfo, getVersion } from '@/api/system/funcConfig'
  import { ref } from 'vue'
  import dayjs from 'dayjs'
  import { UploadOutlined } from '@ant-design/icons-vue'
  import { useUserStore } from '@/store/modules/user'
  import { message, type UploadChangeParam } from 'ant-design-vue'
  import { useFormModal } from '@/hooks/useModal/useFormModal'
  import type { FormSchema } from '@/components/core/schema-form/src/types/form'
  import { useI18n } from '@/hooks/useI18n'

  const action = ref(import.meta.env.VITE_BASE_API_URL + `/fileUpload`)
  const headers = ref({
    Token: useUserStore().getToken(),
  })
  const handleChange = (info: UploadChangeParam) => {
    if (info.file.status !== 'uploading') {
      console.log(info.file, info.fileList)
    }
    if (info.file.status === 'done') {
      tapCaptchaConfig.value.backImgUrl = info.file.response
      message.success('上传成功')
    } else if (info.file.status === 'error') {
      message.error(`上传失败`)
    }
  }
  const fileList = ref([])

  const loading = ref(false)
  const data = ref()
  const tapCaptchaConfig = ref()
  const title = ref()
  const version = ref()
  const initData = async () => {
    fileList.value = []
    loading.value = true
    try {
      version.value = await getVersion.request()
    } catch (error) {
      console.log('获取版本信息异常')
    }
    getConfigInfo.request().then((res: any) => {
      title.value =
        '功能配置 (最后更新时间 : ' +
        dayjs(res.updateTime).format('YYYY-MM-DD HH:mm:ss') +
        ') ' +
        version.value
      data.value = res
      tapCaptchaConfig.value = res.tapCaptchaConfig || {}
    })
  }
  initData()

  const [showModal] = useFormModal()
  const formSchemas: FormSchema[] = [
    {
      field: 'password',
      component: 'Input',
      label: '您正在进行敏感操作，请输入密码确认',
      rules: [{ required: true }],
    },
  ]
  const { t } = useI18n()
  const update = async () => {
    const [formRef] = await showModal({
      modalProps: {
        title: t('common.edit'),
        width: '40%',
        onFinish: async values => {
          let copyData = JSON.parse(JSON.stringify(data.value))
          const { password } = values
          copyData.password = password
          const { _id, createTime, updateTime, ...item } = copyData
          item.tapCaptchaConfig = tapCaptchaConfig.value
          PostConfigInfo.request(_id, copyData).then(() => {
            message.success('修改成功')
            initData()
          })
        },
      },
      formProps: {
        labelWidth: 280,
        layout: 'vertical',
        schemas: formSchemas,
      },
    })
  }
</script>

<style lang="scss" scoped>
  .ant-page-header {
    padding: 0 0 24px 0;
  }
  .ant-page-header-heading-title {
    font-size: 16px !important;
  }
  .ant-form {
    display: flex;
    justify-content: space-between;
  }
  .list-w {
    width: 18%;
    flex: 0 0 18%;
  }
  .ant-upload {
    width: 100%;
  }
</style>
